<template>
	<view class="page pd-30" v-if="Object.keys(detail).length > 0">
		<!-- <navHead :datas="headData"></navHead> -->
		<comHead  :datas="datasObj"></comHead>
		<view class="flex-c-center">

			<template v-if="detail.order_status == '待付款'">
				<view class="flex mb-20">
					<image class="wh-32 mr-10" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon1.png">
					</image>
					<view class="ft-32 c-33 fw-800 flex">
						{{ detail.price_label }}
						<text v-if="detail.show_pay_countdown == 1">
							|
						</text>
						<text class="c-9c fw-400" v-if="detail.show_pay_countdown == 1">
							剩余:
							<!-- {{
							detail.pay_countdown.d }}天
							{{ detail.pay_countdown.h }}:{{ detail.pay_countdown.m }}:{{ detail.pay_countdown.s
							}} -->

						</text>
						<comTimeOut :size="32" :time="detail.pay_countdown_time" :isBgd="true"></comTimeOut>

					</view>
				</view>
				<view class="flex expire-btn mb-20" @click.stop="doShowCoupon(detail.coupon_expire_list)"
					v-if="detail.show_coupon_expire == 1">
					<view class="ft-24 c-red">{{ detail.coupon_expire_count }}张优惠券即将过期</view>
					<image class="wh-24 ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
				<view class="flex mb-20">
					<text class="ft-20 c-33 fw-800">{{ '￥' }}</text>
					<text class="ft-68 ft-num c-33 fw-900">{{ detail.price_show }}</text>
				</view>
				<view class="pay-btn ft mb-30"
					@click="goPage('/subpackage/joinGroup/cashRegister?order_id=' + detail.id)">去支付</view>
			</template>
			<view class="status-btn flex-bwt mb-20"
				:class="{ ing: detail.order_status == '办理中', finish: detail.order_status == '已完成' }" v-else>
				<view class="flex">
					<image class="wh-32 mr-10" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon2.png"
						v-if="detail.order_status == '办理中'"></image>
					<image class="wh-32 mr-10" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon3.png"
						v-if="detail.order_status == '已完成'"></image>
					<image class="wh-32 mr-10" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon4.png"
						v-if="detail.order_status == '已取消'"></image>
					<view class="ft-32 c-33 fw-800" v-if="detail.order_status == '办理中'">订单正在办理中</view>
					<view class="ft-32 c-33 fw-800" v-if="detail.order_status == '已完成'">订单已完成</view>
					<view class="ft-32 c-33 fw-800" v-if="detail.order_status == '已取消'">订单已取消</view>
				</view>
				<view class="ft-24 c-99" v-if="detail.show_close_reason == 1">取消原因：{{ detail.close_reason }}</view>
			</view>
			<view class="refund-box flex-bwt pd-20 mt-10 mb-20"
				@click="goPage('/subpackage/refund/refundDetail?id=' + detail.refund_info.id)"
				v-if="detail.show_refund_status == 1">
				<view class="ft fw-800">退款/售后</view>
				<view class="flex">
					<view class="ft-24 c-66">{{ detail.refund_status_txt }}</view>
					<image class="wh-24 ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
			</view>
			<view class="group-box flex-bwt mb-20"
				@click.stop="goPage('/subpackage/joinGroup/groupDetail?group_id=' + detail.group_id + '&order_id=' + detail.id)"
				v-if="detail.is_group == 1">
				<view class="flex">
					<image class="icon mr-10" src="https://cdn.oss.bon-top.cn/static_bc/images/pdd_icon.png"
						v-if="detail.group_data.txt != '拼团时间已结束，自动转为普通订单'"></image>
					<view class="ft fw-800 flex">
						<view v-html="detail.group_data.txt"></view>
						<text v-if="detail.group_data.price">
							+￥{{ detail.group_data.price }}</text>
						<!-- <text v-if="detail.group_data.countdown">{{
							detail.group_data.countdown.d }}天
							{{ detail.group_data.countdown.h }}:{{ detail.group_data.countdown.m }}:{{
								detail.group_data.countdown.s
							}}</text> -->
						<comTimeOut :size="20" v-if="detail.pay_countdown_time" :time="detail.pay_countdown_time">
						</comTimeOut>
					</view>
				</view>
				<image class="wh-24 ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
			</view>
			<view class="progress-box mb-20 pd-20" v-if="detail.progress.length > 0">
				<view class="ft-28 c-33 fw-800">订单进度</view>
				<view class="progress-list pd-20">
					<view class="progress-item" v-for="(item, index) in detail.progress" :key="index">
						<view class="flex-bwt">
							<view class="l flex">
								<view class="radius flex-center mr-8"
									:class="{ active: index < detail.progress.length - 1 }">
									<view class="c"></view>
								</view>
								<view class="ft fw-800">{{ item.name }}</view>
							</view>
							<view class="ft-22 c-99">{{ item.created_at }}</view>
						</view>
						<view class="b flex" :class="{ active: index < detail.progress.length - 1 }">
							<view style="width: 20rpx;">
								<view class="line" v-if="index < detail.progress.length - 1"></view>
							</view>
							<view class="txt ft-22 c-66 mt-10 ml-10">{{ item.content }}</view>
						</view>
					</view>
				</view>
				<view class="more-btn ft-24 c-33 flex-center pd-20"
					@click="goPage('/subpackage/orderList/progress?order_id=' + detail.id)">
					{{ '查看更多' }}
					<image class="wh-24 ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
					</image>
				</view>
				<view class="link-list mt-20 flex-center">
					<view class="flex" @click="handleContact">
						<image class="wh-28 mr-4" src="https://cdn.oss.bon-top.cn/static_bc/images/info.png"></image>
						<view class="ft">联系客服</view>
					</view>
					<view class="line"></view>
					<view class="flex" @click="callTel">
						<image class="wh-28 mr-4" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon5.png">
						</image>
						<view class="ft">拨打电话</view>
					</view>
				</view>
			</view>
			<template v-if="detail.type == 1">
				<view class="progress-box mb-20 pd-20">
					<view class="ft-28 c-33 fw-800">支付列表</view>
					<view class="pay-box pd-20">
						<view class="flex-bwt">
							<view class="ft-24 c-99">应付款</view>
							<view class="ft">￥{{ detail.total_price }}</view>
						</view>
						<view class="flex-bwt mt-20">
							<view class="ft-24 c-99">已付款</view>
							<view class="ft">￥{{ detail.pay_total_price }}</view>
						</view>
						<view class="flex-bwt mt-20" v-if="detail.near_pay_info">
							<view class="ft-24 c-99">最后一笔</view>
							<view class="ft">￥{{ detail.near_pay_info.price }}<text class="c-red">
									{{
										detail.near_pay_info.examine_status ? '(' + detail.near_pay_info.examine_status +
											')' : ''
									}}</text></view>
						</view>
					</view>
					<view class="more-btn ft-24 c-33 flex-center pd-20"
						@click="goPage('/subpackage/orderList/payList?order_id=' + detail.id)">
						{{ '查看更多' }}
						<image class="wh-24 ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
						</image>
					</view>
				</view>
				<view class="progress-box mb-20 pd-20">
					<view class="flex-bwt">
						<view class="ft-28 c-33 fw-800">订购商品</view>
						<view class="flex" v-if="detail.product_list.length > 1"
							@click="goPage('/subpackage/orderList/editOrderServe?order_id=' + detail.id)">
							<view class="ft-24 c-99">修改</view>
							<image class="wh-22 ml-4" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon7.png">
							</image>
						</view>
					</view>
					<view class="product-item pd-20 mt-20" v-for="(item, index) in detail.product_list" :key="index"
						@click="goPage('/subpackage/immigration/immigration?id=' + item.product_id)">
						<image class="imgs" :src="item.cover" mode="aspectFill"></image>
						<view class="right_box ml-20 mt-10 te-wid c-33">
							<view class="title te-1 ft-32 fw-800">
								{{ item.name }}
							</view>
							<view class="c-99 te-1 ft-24 mt-10" v-if="item.spec_name">
								{{ item.additional_id > 0 ? '附加服务' : '商品：' + item.spec_name }}
							</view>
							<view class="tip flex mt-10" v-if="item.service_data"
								@click.stop="checkService(item.service_data)">
								<view class="ft">{{ item.service_data.name }}</view>
								<image class="ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"
									style="width: 20rpx;height: 34rpx;"></image>
							</view>
						</view>
					</view>
					<view class="price-info pd-20">
						<view class="flex-bwt">
							<view class="ft-24 c-99">商品价格</view>
							<view class="ft">￥{{ orderSettlementInfo.total_old_price_exchange_show }}</view>
						</view>
						<view class="flex-bwt mt-20" @click="showCouponDetail = true"
							v-if="orderSettlementInfo.total_reduce_price_exchange_show">
							<view class="ft-24 c-99">优惠减</view>
							<view class="ft c-red flex">
								<view>￥{{ orderSettlementInfo.total_reduce_price_exchange_show }}</view>
								<image class="ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"
									style="width: 20rpx;height: 34rpx;"></image>
							</view>
						</view>
						<view class="flex-bwt mt-20" v-if="orderSettlementInfo.integral_reduce_price_exchange_show">
							<view class="ft-24 c-99">积分减免</view>
							<view class="ft c-red">￥{{ orderSettlementInfo.integral_reduce_price_exchange_show }}</view>
						</view>
						<view class="flex-bwt mt-20" v-if="orderSettlementInfo.share_reduce_price_exchange_show">
							<view class="ft-24 c-99">分享减免</view>
							<view class="ft">￥{{ orderSettlementInfo.share_reduce_price_exchange_show }}</view>
						</view>
					</view>
					<view class="more-btn ft-24 c-33 flex-center pd-20" @click="showOffers = true">
						{{ '清单明细' }}
						<image class="wh-24 ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
						</image>
					</view>
				</view>
				<view class="progress-box mb-20 pd-20">
					<view class="ft-28 c-33 fw-800">订单信息</view>
					<view class="list_detail_item flex-bwt">
						<text class="ft-24 c-99">订单编号</text>
						<view class="ft flex">
							<up-copy :content="detail.ordernum">
								<view class="copy-btn mr-10">
									复制
								</view>
							</up-copy>
							{{ detail.ordernum }}
						</view>
					</view>
					<view class="list_detail_item flex-bwt">
						<text class="ft-24 c-99">创建订单时间</text>
						<view class="ft">
							{{ detail.created_at }}
						</view>
					</view>
					<template v-if="detail.first_pay_info">
						<view class="list_detail_item flex-bwt">
							<text class="ft-24 c-99">首次支付方式</text>
							<view class="ft">
								{{ detail.first_pay_info.pay_type }}
							</view>
						</view>
						<view class="list_detail_item flex-bwt">
							<text class="ft-24 c-99">首次支付时间</text>
							<view class="ft">
								{{ detail.first_pay_info.pay_time }}
							</view>
						</view>
					</template>
					<view class="list_detail_item flex-bwt">
						<text class="ft-24 c-99">订单完成时间</text>
						<view class="ft">
							{{ detail?.finish_time || '/' }}
						</view>
					</view>
					<view class="list_detail_item flex-bwt">
						<text class="ft-24 c-99">订单备注信息</text>
						<view class="ft">
							{{ detail?.remark || '/' }}
						</view>
					</view>
				</view>
				<view class="ft-22 c-99" style="white-space: pre-wrap;">
					温馨提示：<br />
					1、下定订单后请及时支付，如有遇到不清楚的地方可以直接联系咨询客服。<br />
					2、订单创建后需支付“首笔款”即订单才生效。如订单“支付列表”中有分批支付需按分批支付时间进行支付，分批支付项目中在下订单时已领取的“优惠券”，在订单办理期间无论“优惠券”是否过期都是有效的。
				</view>
			</template>
			<template v-if="detail.type == 2">
				<view class="consult-progress-box mb-20 pd-20">
					<view class="ft-28 c-33 fw-800">咨询流程</view>
					<view class="progress_bar_box mt-20">
						<view class="progress_bar_item flex-bwt">
							<view class="item "
								v-for="(item, index) of [{ 'name': '支付费用', 'is_active': (detail.is_pay == 1 ? 1 : 0) }, { 'name': '参会沟通', 'is_active': 0 }, { 'name': '获取评估完成', 'is_active': 0 }]"
								:key="index" :style="{ flex: index < 2 ? 1 : 0 }">
								<view class="flex-center">
									<view class="icon" :class="{ active: item.is_active == 1 }">
									</view>
									<view class="solid ml-10 mr-10" v-if="index < 2"
										:class="{ solitActive: item.is_active == 1 }">
									</view>
								</view>
							</view>
						</view>
						<view class="progress_bar_text flex-bwt mt-10">
							<view class="item "
								v-for="(item, index) of [{ 'name': '支付费用', 'is_active': (detail.is_pay == 1 ? 1 : 0) }, { 'name': '参会沟通', 'is_active': 0 }, { 'name': '获取评估完成', 'is_active': 0 }]"
								:key="item">
								<view class="text c-99 ft-24" :class="{ active: item.is_active == 1 }">
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<view class="consult-status ft-22 c-66 pd-20 mt-20"><text class="c-33">{{
						detail.sale_consult_progress_content.status }}</text>{{
								detail.sale_consult_progress_content.txt }}
					</view>
				</view>
				<view class="progress-box mb-20 pd-20">
					<view class="flex-bwt">
						<view class="ft-28 c-33 fw-800">订购商品</view>
						<view class="flex" v-if="detail.is_can_edit"
							@click="goPage('/subpackage/orderList/editSaleOrder?order_id=' + detail.id)">
							<view class="ft-24 c-99">修改</view>
							<image class="wh-22 ml-4" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon7.png">
							</image>
						</view>
					</view>

					<view class="product-item pd-20 mt-20" v-for="(item, index) in detail.product_list" :key="index"
						@click="goPage('/subpackage/teacher/teacherDetail?id=' + detail.sale_id)">
						<view class="avtor flex-center">
							<image class="img" :src="item.cover" mode="aspectFill"></image>
						</view>
						<view class="right_box ml-20 mt-10 te-wid c-33" style="width:482rpx;">
							<view class="title te-1 ft-32 fw-800">
								{{ item.name }}
							</view>
							<view class="c-66 te-1 ft-24 mt-10">
								{{ item.txt1 }}
							</view>
							<view class="c-99 te-1 ft-24 mt-10">
								{{ item.txt2 }}
							</view>
						</view>
					</view>
					<view class="price-info pd-20" v-if="detail.order_info.appointment_data">
						<view class="flex-bwt mt-20">
							<view class="ft-24 c-99">预约时间</view>
							<view class="ft">{{ detail.order_info.appointment_data.appointment_time }}</view>
						</view>
						<view class="flex-bwt mt-20">
							<view class="ft-24 c-99">咨询方式</view>
							<view class="ft">{{ detail.order_info.appointment_data.consult_type }}</view>
						</view>
						<view class="flex-bwt mt-20">
							<view class="ft-24 c-99">项目需求</view>
							<view class="ft">{{ detail.order_info.appointment_data.intention }}</view>
						</view>
						<view class="flex-bwt mt-20">
							<view class="ft-24 c-99">联系方式</view>
							<view class="ft">{{ detail.order_info.appointment_data.tel }}</view>
						</view>
						<view class="flex-bwt mt-20">
							<view class="ft-24 c-99">联系人</view>
							<view class="ft">{{ detail.order_info.appointment_data.linkname }}</view>
						</view>
					</view>
					<view class="price-info pd-20">
						<view class="flex-bwt">
							<view class="ft-24 c-99">商品价格</view>
							<view class="ft">￥{{ orderSettlementInfo.total_old_price_exchange_show }}</view>
						</view>
						<view class="flex-bwt mt-20" @click="showCouponDetail = true"
							v-if="orderSettlementInfo.total_reduce_price_exchange_show">
							<view class="ft-24 c-99">优惠减</view>
							<view class="ft c-red flex">
								<view>￥{{ orderSettlementInfo.total_reduce_price_exchange_show }}</view>
								<image class="ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"
									style="width: 20rpx;height: 34rpx;"></image>
							</view>
						</view>
						<view class="flex-bwt mt-20" v-if="detail.order_info.integral > 0">
							<view class="ft-24 c-99">积分减免</view>
							<view class="ft c-red"><text class="c-99">已使用积分{{ detail.order_info.integral }} |
								</text>-￥{{ orderSettlementInfo.integral_reduce_price_exchange_show }}</view>
						</view>
						<view class="flex-bwt mt-20">
							<view class="ft-24 c-99">待付款</view>
							<view class="ft">￥{{ detail.total_price }}</view>
						</view>
						<view class="flex-bwt mt-20">
							<view class="ft-24 c-99">合计实付</view>
							<view class="ft">￥{{ detail.pay_total_price }}</view>
						</view>
					</view>
				</view>
				<view class="progress-box mb-20 pd-20">
					<view class="ft-28 c-33 fw-800">订单信息</view>
					<view class="list_detail_item flex-bwt">
						<text class="ft-24 c-99">订单编号</text>
						<view class="ft flex">
							<up-copy :content="detail.ordernum">
								<view class="copy-btn mr-10">
									复制
								</view>
							</up-copy>
							{{ detail.ordernum }}
						</view>
					</view>
					<view class="list_detail_item flex-bwt">
						<text class="ft-24 c-99">创建订单时间</text>
						<view class="ft">
							{{ detail.created_at }}
						</view>
					</view>
					<template v-if="detail.is_pay == 1">
						<view class="list_detail_item flex-bwt">
							<text class="ft-24 c-99">支付方式</text>
							<view class="ft">
								{{ '在线支付' }}
							</view>
						</view>
						<view class="list_detail_item flex-bwt">
							<text class="ft-24 c-99">支付平台</text>
							<view class="ft">
								{{ '微信支付' }}
							</view>
						</view>
						<view class="list_detail_item flex-bwt">
							<text class="ft-24 c-99">支付时间</text>
							<view class="ft">
								{{ detail?.pay_time || '/' }}
							</view>
						</view>
					</template>
					<view class="list_detail_item flex-bwt">
						<text class="ft-24 c-99">完成时间</text>
						<view class="ft">
							{{ detail?.finish_time || '/' }}
						</view>
					</view>
					<view class="list_detail_item flex-bwt">
						<text class="ft-24 c-99">备注信息</text>
						<view class="ft">
							{{ detail?.remark || '/' }}
						</view>
					</view>
				</view>
			</template>
			<template v-if="detail.type == 3">
				<view class="progress-box mb-20 pd-20">
					<view class="flex-bwt">
						<view class="ft-28 c-33 fw-800">订购商品</view>
					</view>
					<view class="product-item pd-20 mt-20" v-for="(item, index) in detail.product_list" :key="index"
						@click="goPage('/subpackage/openVip/openVip')">
						<image class="imgs" :src="detail.cover" mode="aspectFill"></image>
						<view class="right_box ml-20 mt-10 te-wid c-33">
							<view class="title te-1 ft-32 fw-800">
								{{ item.name }}
							</view>
							<view class="c-99 te-1 ft-24 mt-10">
								{{ item.spec_name }}
							</view>
						</view>
					</view>
					<view class="price-info pd-20">
						<view class="flex-bwt">
							<view class="ft-24 c-99">商品价格</view>
							<view class="ft">￥{{ orderSettlementInfo.total_old_price_exchange_show }}</view>
						</view>
						<view class="flex-bwt mt-20" @click="showCouponDetail = true"
							v-if="orderSettlementInfo.total_reduce_price_exchange_show">
							<view class="ft-24 c-99">优惠减</view>
							<view class="ft c-red flex">
								<view>￥{{ orderSettlementInfo.total_reduce_price_exchange_show }}</view>
								<image class="ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"
									style="width: 20rpx;height: 34rpx;"></image>
							</view>
						</view>
						<view class="flex-bwt mt-20" v-if="detail.order_info.integral > 0">
							<view class="ft-24 c-99">积分减免</view>
							<view class="ft c-red"><text class="c-99">已使用积分{{ detail.order_info.integral }} |
								</text>-￥{{ orderSettlementInfo.integral_reduce_price_exchange_show }}</view>
						</view>
						<view class="flex-bwt mt-20">
							<view class="ft-24 c-99">待付款</view>
							<view class="ft">￥{{ detail.total_price }}</view>
						</view>
						<view class="flex-bwt mt-20">
							<view class="ft-24 c-99">合计实付</view>
							<view class="ft">￥{{ detail.pay_total_price }}</view>
						</view>
					</view>
				</view>
				<view class="progress-box mb-20 pd-20">
					<view class="ft-28 c-33 fw-800">订单信息</view>
					<view class="list_detail_item flex-bwt">
						<text class="ft-24 c-99">订单编号</text>
						<view class="ft flex">
							<up-copy :content="detail.ordernum">
								<view class="copy-btn mr-10">
									复制
								</view>
							</up-copy>
							{{ detail.ordernum }}
						</view>
					</view>
					<view class="list_detail_item flex-bwt">
						<text class="ft-24 c-99">创建订单时间</text>
						<view class="ft">
							{{ detail.created_at }}
						</view>
					</view>
					<template v-if="detail.is_pay == 1">
						<view class="list_detail_item flex-bwt">
							<text class="ft-24 c-99">支付方式</text>
							<view class="ft">
								{{ '在线支付' }}
							</view>
						</view>
						<view class="list_detail_item flex-bwt">
							<text class="ft-24 c-99">支付平台</text>
							<view class="ft">
								{{ '微信支付' }}
							</view>
						</view>
						<view class="list_detail_item flex-bwt">
							<text class="ft-24 c-99">支付时间</text>
							<view class="ft">
								{{ detail?.pay_time || '/' }}
							</view>
						</view>
					</template>
					<view class="list_detail_item flex-bwt">
						<text class="ft-24 c-99">完成时间</text>
						<view class="ft">
							{{ detail?.finish_time || '/' }}
						</view>
					</view>
				</view>
			</template>
		</view>

		<view style="height: 166rpx;"></view>
		<view class="btm flex-bwt" v-if="detail.order_status != '已取消'">
			<view class="l">
				<template v-if="detail.more_btn">
					<view @click.stop="isShow = !isShow" class="more-txt ft-24 c-99">更多</view>
					<view class="del-btn flex-center" v-if="isShow" @click.stop="handleOrderCode(detail.more_btn)">
						<image class="bg" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon8.png"></image>
						<view class="shadow"></view>
						<view class="txt">
							<view v-if="detail.more_btn == 'cancel' || detail.more_btn == 'close'">{{ '取消' }}
							</view>
							<view v-else-if="detail.more_btn == 'delete'">
								{{ '删除' }}
							</view>
							<view v-else-if="detail.more_btn == 'refund'">
								{{ '申请售后' }}
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="btn-list flex" v-if="detail.btns.length > 0">
				<view class="btn" :class="{ noPay: v.code == 'toPay', pay: v.code == 'payDetail' }"
					v-for="(v, k) in detail.btns" :key="k" @click.stop="handleOrderCode(v.code)">{{ v.name }}</view>
			</view>
		</view>

	</view>

	<up-popup :show="showCoupon" mode="bottom" round="14" @open="openCoupon">
		<view class="offers">
			<image class="popup-close wh-36" @click.stop="closeCoupon"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">优惠券即将过期</view>
			<view class="mt-10 ft-24 c-99">{{ "温馨提示：订单在未完成“首期款”支付前，优惠券过期后不可使用；完成“首期款”支付后，订单内“分期款”的优惠券不限时间；" }}</view>
			<view class="mt-20" style="height: 2rpx;width: 100%;background-color: #F1F1F1;"></view>

			<view class="mt-20 ft fw-800">{{ "即将过期的券" }}</view>
			<view class="list" v-if="couponList.length > 0">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view v-for="(item, index) in couponList" :key="item.id">
						<view class="flex mt-20">
							<view class="left">
								<text class="tip pd-8 c-ff  ft ft-20">{{ item.preferential_name }}</text>
								<view class="mt-10 jia">
									<view class="ft1 ft-num">{{ item.currency_symbol + item.reduce }}</view>
									<view class="ft" style="white-space: nowrap;"
										v-if="item.cate == 1 || item.cate == 2">
										{{ item.type_name }}
									</view>
									<view class="ft" style="white-space: nowrap;" v-else-if="item.cate == 3">
										{{ "服务费" + item.discount + '折券' }}
									</view>
								</view>
							</view>
							<view class="right flex-bwt pd-20">
								<view class="ml-20 mt-10">
									<view class="ft1 ft-24">{{ item.txt }}</view>
									<view class="ft mt-12 c-99">{{ item.start_time + ' ~ ' + item.end_time }}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bottomBtn flex-center">
				<view class="btn flex-center ft c-dbf" @click.stop="closeCoupon">确定</view>
			</view>
		</view>
	</up-popup>
	<up-popup :show="showCouponDetail" mode="bottom" round="14" @open="openCouponDetail">
		<view class="offers">
			<image class="popup-close wh-36" @click.stop="closeCouponDetail"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">优惠券明细</view>
			<view class="mt-10 ft-24 c-99">{{ "当前订单的优惠券（已付首期款生效的订单内的优惠券，在订单办理期内都有效）" }}</view>
			<view class="list" v-if="orderSettlementInfo.coupon_list && orderSettlementInfo.coupon_list.length > 0">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view v-for="(item, index) in orderSettlementInfo.coupon_list" :key="item.id">
						<view class="flex mt-20">
							<view class="left">
								<text class="tip pd-8 c-ff  ft ft-20">{{ item.preferential_name }}</text>
								<view class="mt-10 jia">
									<view class="ft1 ft-num">{{ item.currency_symbol + item.reduce }}</view>
									<view class="ft" style="white-space: nowrap;"
										v-if="item.cate == 0 || item.cate == 1 || item.cate == 2">
										{{ item.type_name }}
									</view>
									<view class="ft" style="white-space: nowrap;" v-else-if="item.cate == 3">
										{{ "服务费" + item.discount + '折券' }}
									</view>
								</view>
							</view>
							<view class="right flex-bwt pd-20">
								<view class="ml-20 mt-10">
									<view class="ft1 ft-24">{{ item.txt }}</view>
									<view class="ft mt-12 c-99">{{ item.start_time + ' ~ ' + item.end_time }}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bottomBtn flex-center">
				<view class="btn flex-center ft c-dbf" @click.stop="closeCouponDetail">确定</view>
			</view>
		</view>
	</up-popup>
	<up-popup :show="showFuwu" mode="bottom" round="14" @open="openF">
		<view class="offers">
			<image class="popup-close wh-36" @click="closeF"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">服务</view>
			<view class="ft mt-12 c-99">{{ serviceInfo.name }}，适用说明</view>
			<scroll-view scroll-y="true" class="scroll-Y-service">
				<view class="card_6 flex mt-20 pd-20">
					<view class="card">
						<view class="flex" style="align-items: stretch;">
							<view class="left ft c-99"> 服务</view>
							<view class="right pd-20 ft">{{ serviceInfo.name }}</view>
						</view>
						<view class="flex" style="align-items: stretch;">
							<view class="left ft c-99"> 期限</view>
							<view class="right pd-20 ft">{{ serviceInfo.term }}</view>
						</view>
						<view class="flex" style="align-items: stretch;">
							<view class="left ft c-99"> 条件</view>
							<view class="right pd-20 ft">{{ serviceInfo.requirement }}
							</view>
						</view>

					</view>
				</view>
				<view class="card_7 mt-20 pd-20">
					<view class="ft1">其他</view>
					<view class="ft c-99 mt-10">{{ serviceInfo.des }}</view>
				</view>
			</scroll-view>
			<view class="bottomBtn flex-center">
				<view class="btn c-dbf flex-center ft" @click="showFuwu = false">知道了</view>
			</view>
		</view>
	</up-popup>
	<up-popup :show="showOffers" mode="bottom" round="14" @open="openO"
		v-if="Object.keys(orderSettlementInfo).length > 0">
		<view class="offers">
			<image class="popup-close wh-36" @click="closeO"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">汇率明细</view>
			<view class="ft c-99 mt-10 ft-lue" style="width:670rpx;">{{
				orderSettlementInfo.today_currency_str
			}}</view>
			<view class="mt-20 flex">
				<view class="popuItem ft flex-center mr-20" v-for="(item, index) in checkList" :key="item.id"
					:class="{ active: tabSec === item.id }" @click="selctCheck(item.id)">
					{{ item.title }}
				</view>
			</view>

			<view class="content mt-20">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll" v-if="tabSec === 1">
					<view class="neiriong pd-20">
						<view class="ft1">{{ "服务费" }}</view>
						<view class="cardItem mt-20 pd-20"
							v-for="(item, index) in orderSettlementInfo.price_detail_list" :key="index">
							<view class="flex-bwt" :class="{ border: item.isOpen == 1 }">
								<view class="ft fw-800 c-33">{{ item.name }}</view>
								<view class="flex" v-if="item.is_coupon === 0"><text class="ft-num mr-8 ft-24">{{
									item.formula }}</text>
									<image class="wh-24" :class="{ down: item.isOpen != 1 }"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
										@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
									</image>
								</view>
								<view class="flex" v-else><text class="ft icon_quan c-ff">券</text>
									<text class="ft-num c-red mr-8 ft-24">{{ item.formula }}</text>
									<image class="wh-24" :class="{ down: item.isOpen != 1 }"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
										@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
									</image>
								</view>
							</view>
							<view class="ft mt-24 c-99" v-if="item.isOpen == 1">{{ item.txt }}</view>
						</view>
						<view class="ft1 mt-20">{{ "其他费用" }}</view>
						<view class="cardItem mt-20 pd-20"
							v-for="(item, index) in orderSettlementInfo.other_price_detail_list" :key="index">
							<view class="flex-bwt" :class="{ border: item.isOpen == 1 }">
								<view class="ft fw-800 c-33">{{ item.name }}</view>
								<view class="flex" v-if="item.is_coupon === 0"><text class="ft-num mr-8 ft-24">{{
									item.formula }}</text>
									<image class="wh-24" :class="{ down: item.isOpen != 1 }"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
										@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
									</image>
								</view>
								<view class="flex" v-else><text class="ft icon_quan c-ff">券</text>
									<text class="ft-num c-red mr-8 ft-24">{{ item.formula }}</text>
									<image class="wh-24" :class="{ down: item.isOpen != 1 }"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
										@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
									</image>
								</view>
							</view>
							<view class="ft mt-24 c-99" v-if="item.isOpen == 1">{{ item.txt }}</view>
						</view>
						<view class=" mt-20"
							v-if="orderSettlementInfo.additional_price_detail_list && orderSettlementInfo.additional_price_detail_list.length > 0">
							<view class="ft1">{{ "附加服务费" }}</view>
							<view class="cardItem mt-20 pd-20"
								v-for="(item, index) in orderSettlementInfo.additional_price_detail_list" :key="index">
								<view class="flex-bwt" :class="{ border: item.isOpen == 1 }">
									<view class="ft fw-800 c-33">{{ item.name }}</view>
									<view class="flex"><text class="ft-num mr-8 ft-24">{{ item.formula }}</text>
										<image class="wh-24" :class="{ down: item.isOpen != 1 }"
											src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
											@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
										</image>
									</view>
								</view>
								<view class="ft mt-20 c-99" v-if="item.isOpen == 1">{{ item.txt }}</view>
							</view>
						</view>

						<view class="price flex mt-20">
							<view>
								<text class="ft c-red">{{ "共减￥" }}</text><text class="ft-num ft-24 c-red">{{
									orderSettlementInfo.total_reduce_price_exchange_show
								}}</text><text class="ft c-red mr-12">{{ "元" }}</text>
								<text class="ft">{{ "合计￥" }}</text><text class="ft-num">{{
									orderSettlementInfo.total_price_exchange_show }}</text>
								<text class="ft">{{ "元" }}</text>
							</view>

							<view class="ft ft-hen">
								<text class="ft c-99">{{ "原价" }}</text><text class="ft-num ft-24 c-99">{{
									orderSettlementInfo.total_old_price_exchange_show }}</text><text class="ft c-99">{{
										"元"
									}}</text>
							</view>
						</view>
						<view class="jieshi pd-20 c-99 ft mt-20">
							温馨提示：<br />
							1、支付项目服务费，即可下订单。<br />
							2、其它费用以及项目投资费在办理过程中陆续支付，支持线上或线下支付，非微信支付提供支付凭证后，客服人员进行后台核销。<br />
							3、活动立减需领优惠券后生效，有使用时间限制。<br />
							4、领券下订单后，待支付的费用优惠将持继有效。
						</view>
					</view>
				</scroll-view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll" v-if="tabSec === 2">
					<view class="neiriong">
						<view class="pCard pd-20">
							<view class="ft1">投资费用</view>
							<view class="ft mt-12">{{
								"投资费由移民所在国政府或第三方收取，投资人相关权益由被投资方双方签署的协议约束。"
							}}</view>
							<view class="samllCard mt-12">
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 投资类型 </view>
									<view class="right ft fw-800 pd-20"> {{ orderSettlementInfo.invest_type }} </view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 投资标的 </view>
									<view class="right ft fw-800 pd-20"> {{ orderSettlementInfo.invest_bid }} </view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 投资金额 </view>
									<view class="right ft fw-800 pd-20">
										{{ orderSettlementInfo.invest_currency_symbol
											+ orderSettlementInfo.invest_exchange_price_show }}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 换算人民币 </view>
									<view class="right ft fw-800 pd-20">
										{{ orderSettlementInfo.invest_currency_symbol
											+ orderSettlementInfo.invest_exchange_price_show }}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20" style="padding-right: 0;"> 投资是否可回收 </view>
									<view class="right ft fw-800 pd-20">{{ orderSettlementInfo.invest_recycle }} </view>
								</view>
							</view>
						</view>
						<view class="pCard pd-20">
							<view class="ft1">预计投资收益</view>
							<!-- <view class="ft mt-12">{{
	                "投资费由移民所在国政府或第三方收取，投资人相关权益由被投资方双方签署的协议约束。"
	              }}</view> -->
							<view class="samllCard mt-12">
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 持有时间 </view>
									<view class="right ft fw-800 pd-20"> {{ orderSettlementInfo.income_time }} </view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 可得总回报约 </view>
									<view class="right ft fw-800 pd-20">
										{{ orderSettlementInfo.income_rate }}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 预计收益</view>
									<view class="right ft fw-800 pd-20">
										{{
											orderSettlementInfo.income_currency_symbol +
											orderSettlementInfo.income_expect_show
										}}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 换算人民币 </view>
									<view class="right ft fw-800 pd-20">
										{{
											orderSettlementInfo.income_currency_symbol +
											orderSettlementInfo.income_expect_show
										}}
									</view>
								</view>
								<view class="flex line" style="align-items: stretch;height: unset;">
									<view class="left ft c-99 pd-20" style="height: auto;">备注</view>
									<view class="right ft fw-800 pd-20" style="height: unset;border-bottom: none;">
										{{ orderSettlementInfo.income_remark }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll" v-if="tabSec === 3">
					<view class="neiriong">
						<view class="pCard pd-20">
							<view class="ft1">预计汇总</view>
							<view class="ft c-99 mt-12">{{
								"该项目用户预计需要承担的费用汇总"
							}}</view>
							<view style="width: 100%; text-align: right" class="ft c-99 mt-12">{{ "单位(人民币)" }}</view>
							<view class="samllCard mt-12">
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 服务费 </view>
									<view class="right ft flex-bwt pd-20" style="box-sizing: border-box;">
										<text class="ft fw-800">{{ orderSettlementInfo.price_symbol
											+ orderSettlementInfo.price_show }}</text>
										<text v-if="orderSettlementInfo.coupon_price_exchange_show">
											<text style="
	                          width: 32rpx;
	                          height: 32rpx;
	                          background: #ff0000;
	                          border-radius: 8rpx;
							  display: inline-block;
							  text-align: center;
	                        " class="quan c-ff mr-8">券</text>
											<text class="ft c-red">{{
												"-￥" + orderSettlementInfo.coupon_price_exchange_show
											}}</text></text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 办理其它费用 </view>
									<view class="right ft flex-bwt pd-20" style="box-sizing: border-box;">
										<text class="ft fw-800" v-if="orderSettlementInfo.other_price_exchange_show">{{
											orderSettlementInfo.price_symbol
											+ orderSettlementInfo.other_price_exchange_show }}</text>
										<text v-if="orderSettlementInfo.coupon_other_price_exchange_show">
											<text style="
	                          background: #ff0000;
	                          width: 32rpx;
	                          height: 32rpx;
	                          border-radius: 8rpx;
							  display: inline-block;
							  text-align: center;
	                        " class="quan c-ff mr-8">券</text>
											<text class="ft c-red">{{
												"-￥" + orderSettlementInfo.coupon_other_price_exchange_show
											}}</text></text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 附加服务费 </view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800"
											v-if="orderSettlementInfo.additional_price_exchange_show">{{
												"￥" + orderSettlementInfo.additional_price_exchange_show }}</text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 投资费用 </view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800" v-if="orderSettlementInfo.invest_exchange_price_show">{{
											"￥" + orderSettlementInfo.invest_exchange_price_show }}</text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 合计 </view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800">
											{{ "￥" + orderSettlementInfo.total_invest_price_show }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="pCard pd-20">
							<view class="ft1">预计可回收收益汇总</view>
							<view class="ft c-99 mt-12">{{
								"该项目用户预计办理后可回收的收益"
							}}</view>
							<view style="width: 100%; text-align: right" class="ft c-99 mt-12">{{ "单位(人民币)" }}</view>
							<view class="samllCard mt-12">
								<view class="flex line">
									<view class="left ft c-99  pd-20" style="padding-right: 0;"> 可回收投资费用 </view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800" v-if="orderSettlementInfo.recycle_exchange_price_show">
											{{ "￥" + orderSettlementInfo.recycle_exchange_price_show }}</text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 预计投资收益 </view>
									<view class="right ft flex-bwt pd-20"><text class="ft fw-800"
											v-if="orderSettlementInfo.income_expect_show">
											{{ "￥" + orderSettlementInfo.income_expect_show }}</text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 合计 </view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800" v-if="orderSettlementInfo.total_recycle_price_show">{{
											"￥" + orderSettlementInfo.total_recycle_price_show + "人民币"
										}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="bottomBtn flex-center">
			<view class="btn flex-center ft c-dbf" @click="closeO">确定</view>
		</view>
	</up-popup>
	<!-- <dialogPop ref="diaLogPop" :option="option" @confirm='confirm' @close='close'></dialogPop> -->
	<dialogPop ref="diaLogPop" :show="showModal" :title="option.title" :content='option.html' @confirm='confirm'
		@cancel='cancel'>
	</dialogPop>
</template>

<script setup lang="js">
import {
	reactive,
	ref
} from 'vue';
import navHead from '@/components/navHead.vue';
import dialogPop from '@/components/dialogPop.vue';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onLoad,
	onShow
} from "@dcloudio/uni-app";
import comTimeOut from '@/components/comTimeOut.vue';
const headData = reactive({
	color: '#fff',
	title: '订单详情'
})

import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '订单详情',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
})

const scrollTop = ref(0)

const detail = ref({})
const orderId = ref('')
const orderSettlementInfo = ref({})
onLoad((options) => {
	orderId.value = options?.id || ''
	reloadData()
})

const reloadData = () => {
	utils
		.request(
			api.getOrderDetail, {
			id: orderId.value
		},
			"get"
		)
		.then((res) => {
			detail.value = res.data.info
			orderSettlementInfo.value = detail.value.order_info.detail_data
			orderSettlementInfo.value.coupon_list = detail.value.order_info.coupon_data
		});
}

// 页面显示时检测刷新标记
onShow(() => {
	const app = getApp();
	if (app.globalData.shouldRefresh) {
		reloadData()
		app.globalData.shouldRefresh = false;
	}
})

// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url,
	});
}

const couponList = ref([])
const doShowCoupon = (list) => {
	couponList.value = list
	showCoupon.value = true
}

const showCoupon = ref(false);
const closeCoupon = () => {
	showCoupon.value = false
}
const openCoupon = () => {
	showCoupon.value = true
}

const showCouponDetail = ref(false);
const closeCouponDetail = () => {
	showCouponDetail.value = false
}
const openCouponDetail = () => {
	showCouponDetail.value = true
}

//联系客服
const handleContact = () => {
	uni.share({
		provider: "weixin",
		openCustomerServiceChat: true,
		corpid: 'wwc8da87b42ebd46ff', //客服ID
		customerUrl: 'https://work.weixin.qq.com/kfid/kfc76f33e635469a091', //客服的页面路径
	})
}
//拨打电话
const callTel = () => {
	uni.makePhoneCall({
		phoneNumber: '0755-8938 5111'
	});
}

const serviceInfo = ref({})
const checkService = (info) => {
	serviceInfo.value = info
	showFuwu.value = true
}
const showFuwu = ref(false);
const closeF = () => {
	showFuwu.value = false
}
const openF = () => {
	showFuwu.value = true;
}

const showOffers = ref(false);
const closeO = () => {
	showOffers.value = false
}
const openO = () => {
	showOffers.value = true;
}
const checkList = ref(
	[{
		id: 1,
		title: '办理花费'
	},
	{
		id: 2,
		title: '投资费用'
	},
	{
		id: 3,
		title: '预计汇总'
	}
	]
)
const tabSec = ref(1)
const selctCheck = (id) => {
	tabSec.value = id
}


const orderCode = ref('')
const evaluateId = ref('')
const handleOrderCode = (code) => {
	isShow.value = false
	orderCode.value = code
	switch (code) {
		case 'toPay':
			//去支付
			goPage("/subpackage/joinGroup/cashRegister?order_id=" + orderId.value)
			break;
		case 'closeOrder':
			//取消订单
			option.value = {
				html: `确定要取消吗？`,
				title: '取消订单',
			}
			changeOrder()
			break;
		case 'editOrder':
			//修改订单
			var type = detail.value.type
			if (type == 1) {
				goPage("/subpackage/orderList/editOrderServe?order_id=" + orderId.value)
			} else if (type == 2) {
				goPage("/subpackage/orderList/editSaleOrder?order_id=" + orderId.value)
			}

			break;
		case 'applyRefund':
			//申请售后
			goPage("/subpackage/refund/refundUpload?order_id=" + orderId.value)
			break;
		case 'refundDetail':
			//售后详情
			goPage("/subpackage/refund/refundDetail?id=" + detail.value.refund_info.id)
			break;
		case 'showProgress':
			//查看进度
			goPage("/subpackage/orderList/progress?order_id=" + orderId.value)
			break;
		case 'payDetail':
			//支付详情
			// var type = detail.value.type
			// if (type == 1) {
			// 	goPage("/subpackage/orderList/payDetail?id=" + detail.value.near_pay_info.id)
			// } else{
			// 	goPage("/subpackage/orderList/payDetail?order_id=" + orderId.value)
			// }
			goPage("/subpackage/orderList/payDetail?order_id=" + orderId.value)
			break;
		case 'toShare':
			//去分享
			var type = detail.value.type
			if (type == 1) {
				goPage("/subpackage/immigration/immigration?id=" + detail.value.product_id)
			} else if (type == 2) {
				goPage("/subpackage/teacher/teacherDetail?id=" + detail.value.sale_id)
			}
			break;
		case 'toEvaluate':
			//评价服务
			if (detail.value.is_evaluate == 1) {
				option.value = {
					html: `订单已评价过了`,
					title: '评价服务',
				}
				evaluateId.value = detail.value.evaluate_id
				changeOrder()
			} else {
				goPage("/subpackage/appraise/appraiseServer?order_id=" + orderId.value + "&product_id=" + detail
					.value.product_id +
					"&sale_id=" + detail.value.sale_id)
			}

			break;
		case 'refundDestination':
			//退款去向
			goPage("/subpackage/refund/refundDestination?id=" + detail.value.refund_info.id)
			break;
		case 'delete':
			//删除订单
			option.value = {
				html: `确定要删除吗？`,
				title: '删除订单',
			}
			changeOrder()
			break;
		case 'close':
			//取消订单
			option.value = {
				html: `确定要取消吗？`,
				title: '取消订单',
			}
			changeOrder()
			break;
		case 'cancel':
			//取消订单
			option.value = {
				html: `确定要取消吗？`,
				title: '取消订单',
			}
			changeOrder()
			break;
		case 'refund':
			//申请售后
			goPage('/subpackage/refund/refundUpload?order_id=' + orderId.value)
			break;
		default:
			break;
	}
}

const option = ref({
	html: `确定要删除吗？`,
	title: '删除订单',
})
const showModal = ref(false)

// 弹窗取消时处理逻辑
const cancel = () => {
	showModal.value = false

}
// 弹窗确认提交
const confirm = () => {
	showModal.value = false

	if (orderCode.value == 'closeOrder' || orderCode.value == 'cancel' || orderCode.value == 'close') {
		utils
			.request(
				api.doOrderClose, {
				id: orderId.value
			},
				"post"
			)
			.then((res) => {
				reloadData()
			});
	} else if (orderCode.value == 'delete') {
		utils
			.request(
				api.doOrderDelete, {
				id: orderId.value
			},
				"post"
			)
			.then((res) => {
				getApp().globalData.shouldRefresh = true;
				uni.navigateBack()
			});
	} else if (orderCode.value == 'toEvaluate') {
		goPage('/subpackage/search/detail?id=' + evaluateId.value)
	}
}
// 打开弹窗
const diaLogPop = ref('diaLogPop')
const changeOrder = () => {
	showModal.value = true
	diaLogPop.value.open()
}

const isShow = ref(false)
</script>

<style lang="scss" scoped>
.expire-btn {
	height: 58rpx;
	background: #F8F8F8;
	border-radius: 34rpx;
	padding: 0 20rpx;
}

.pay-btn {
	background: #DBF046;
	border-radius: 20rpx;
	padding: 12rpx 40rpx;
	box-sizing: border-box;
}

.status-btn {
	width: 690rpx;
	height: 104rpx;
	background: linear-gradient(124deg, #FFF3EC 0%, #FFFFFF 100%);
	border-radius: 40rpx;
	padding: 0rpx 20rpx;
	box-sizing: border-box;
}

.status-btn.ing {
	background: linear-gradient(86deg, #F2F2FF 0%, #FFFFFF 100%);
}

.status-btn.finish {
	background: linear-gradient(86deg, #FBFFDF 0%, #FFFFFF 100%);
}

.refund-box {
	width: 690rpx;
	background: linear-gradient(90deg, #F2F2FF 0%, #F8F8F8 100%);
	border-radius: 20rpx;
}

.group-box {
	width: 690rpx;
	height: 74rpx;
	background: linear-gradient(90deg, #FFF3EC 0%, #FBFFDF 100%);
	border-radius: 20rpx;
	padding: 0 20rpx 0 10rpx;
	box-sizing: border-box;

	.icon {
		width: 60rpx;
		height: 52rpx;
	}
}

.progress-box {
	width: 690rpx;
	background: #F8F8F8;
	border-radius: 40rpx;

	.progress-list {
		width: 650rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}

	.progress-item {
		.radius {
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;

			.c {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #333333;
			}
		}

		.radius.active {
			background-color: #333333;

			.c {
				width: 12rpx;
				height: 12rpx;
				background: #DBF046;
			}
		}

		.b {
			align-items: stretch;

			.line {
				width: 2rpx;
				height: 100%;
				background-color: #F1F1F1;
				margin-left: 8rpx;
				margin-right: 8rpx;
			}
		}

		.b.active {
			.txt {
				padding-bottom: 40rpx;
			}
		}
	}

	.more-btn {
		width: 650rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}

	.link-list {
		.line {
			width: 2rpx;
			height: 34rpx;
			margin-left: 60rpx;
			margin-right: 60rpx;
			background-color: #F1F1F1;
		}
	}

	.pay-box {
		width: 650rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}

	.product-item {
		width: 650rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;

		.imgs {
			width: 142rpx;
			height: 174rpx;
			flex-shrink: 0;
			border-radius: 20rpx;
		}

		.avtor {
			width: 108rpx;
			height: 108rpx;
			background: #ffffff;
			border: 2rpx solid #dbf046;
			border-radius: 50%;

			.img {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
			}
		}

		.tip {
			padding: 12rpx 20rpx;
			box-sizing: border-box;
			background: #F1F1F1;
			border-radius: 30rpx;
			width: fit-content;
		}
	}

	.price-info {
		width: 650rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}

	.list_detail_item {
		margin-top: 20rpx;
		align-items: flex-start;
		word-break: break-all;

		.copy-btn {
			padding: 2rpx 6rpx;
			background: #F1F1F1;
			border-radius: 8rpx;
			box-sizing: border-box;
		}

		.ft-24 {
			white-space: nowrap;
			margin-right: 20rpx;
		}

		.ft {
			text-align: right;
		}
	}
}

.consult-progress-box {
	width: 690rpx;
	background: linear-gradient(180deg, #FBFFDF 0%, #F8F8F8 100%);
	border-radius: 40rpx;

	.progress_bar_box {
		.progress_bar_text {
			.active {
				color: #333;
				font-weight: 800;
			}
		}

		.progress_bar_item {
			padding: 0 40rpx;

			.item {
				// display: flex;
				// background-color: red;

				// flex: 1;
				.icon {
					width: 16rpx;
					height: 16rpx;
					background-color: #F1F1F1;
					border-radius: 50%;
				}

				// .icon.active{
				// 	background-color: #333333;
				// }

				.active {
					background-color: #DBF046;
					border: 6rpx solid #333;
				}

				.solid {
					// width: 228rpx;
					flex: 1;
					height: 2rpx;
					background-color: #F1F1F1;
				}

				.solitActive {
					background-color: #333;

				}
			}
		}
	}

	.consult-status {
		width: 650rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 20rpx;
	}
}


.bottomBtn {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-top: 20rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 448rpx;
		height: 78rpx;
		background: #333333;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.offers {
	height: 70vh;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	//border: 2rpx solid red;
	position: relative;
	padding: 40rpx;
	padding-bottom: calc(118rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
	width: 100vw;

	.popup-close {
		position: absolute;
		top: 44rpx;
		right: 44rpx;
	}

	.scroll-Y-service {
		height: calc(100% - 128rpx + env(safe-area-inset-bottom));
	}

	.list {
		height: calc(70vh - 128rpx + env(safe-area-inset-bottom));

		.scroll-Y {
			height: 100%;
		}

		.left {
			width: 182rpx;
			height: 144rpx;
			background: linear-gradient(90deg, #DBF046 0%, #FFEE7E 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			box-sizing: border-box;

			.tip {
				//  width: 88rpx;
				height: 36rpx;
				background: #333333;
				border-radius: 20rpx 8rpx 8rpx 8rpx;
			}

			.jia {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.right {
			width: 508rpx;
			height: 144rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}

	.pay-list {
		height: calc(70vh - 84rpx + env(safe-area-inset-bottom));

		.scroll-Y {
			height: 100%;
		}

		.m {
			width: 670rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			font-weight: 800;
			font-size: 28rpx;
			color: #333333;

			.comboItem {
				background: #F8F8F8;
				border-radius: 20rpx;
			}
		}
	}

	.card_6 {
		width: 670rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		.card {
			width: 630rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #F1F1F1;
			overflow: hidden;

			.left {
				height: auto;
				width: 108rpx;
				background: #F1F1F1;
				padding-top: 20rpx;
				padding-left: 20rpx;
			}

			.right {
				width: 522rpx;
				border-bottom: 2rpx solid #F1F1F1;
			}

			.flex:last-child {
				.right {
					border-bottom: none;
				}
			}
		}
	}

	.card_7 {
		width: 670rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.popuItem {
		width: 152rpx;
		height: 72rpx;
		background: #f1f1f1;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.active {
		background: #dbf046;
	}

	.content {
		width: 100%;
		height: calc(70vh - 380rpx + env(safe-area-inset-bottom));
		// height: 756rpx;

		//  border: #1746ff solid 2rpx;
		.scroll-Y {
			// height: 756rpx;
			height: 100%;
		}

		.neiriong {
			width: 670rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			//height: 1200rpx;
			.cardItem {
				width: 630rpx;
				//height: 148rpx;
				background: #f8f8f8;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.border {
					border-bottom: 2rpx solid #f1f1f1;
					padding-bottom: 20rpx;
				}

				.down {
					transform: rotate(180deg);
				}

				.icon_quan {
					width: 32rpx;
					height: 32rpx;
					background: #ff0000;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					text-align: center;
				}
			}

			.price {
				justify-content: flex-end;
				flex-direction: column;
				align-items: flex-end;
			}

			.jieshi {
				width: 630rpx;
				height: 264rpx;
				background: #fff3ec;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.pCard {
				width: 670rpx;
				// height: 542rpx;
				background: #ffffff;
				border-radius: 40rpx 40rpx 40rpx 40rpx;

				// border: 2rpx solid red;
				.samllCard {
					width: 630rpx;
					//height: 372rpx;
					background: #ffffff;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 2rpx solid #f1f1f1;
					overflow: hidden;

					.line {
						height: 74rpx;

						.left {
							width: 200rpx;
							height: 76rpx;
							background: #f1f1f1;
						}

						.right {
							width: 460rpx;
							height: 74rpx;
							border-bottom: #F1F1F1 solid 2rpx;
						}
					}
				}
			}
		}
	}
}

.btm {
	display: flex;
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	box-sizing: border-box;
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-top: 10rpx;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.l {
		flex-shrink: 0;
		position: relative;

		.del-btn {
			position: absolute;
			top: -98rpx;
			left: 0;
			z-index: 1;
			width: 128rpx;
			height: 94rpx;

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 128rpx;
				height: 94rpx;
				z-index: 1;
			}

			.shadow {
				width: 128rpx;
				height: 74rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.06);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				position: absolute;
				top: 20rpx;
				left: 0;
				z-index: 2;
			}

			.txt {
				position: absolute;
				width: 128rpx;
				text-align: center;
				left: 0;
				top: 40rpx;
				font-weight: 800;
				font-size: 24rpx;
				color: #333333;
				z-index: 2;
			}
		}
	}

	.btn-list {
		.btn {
			width: 192rpx;
			height: 78rpx;
			background: #F1F1F1;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #333333;
			margin-left: 20rpx;
		}

		.noPay {
			background-color: #333;
			color: #dbf046;
		}

		.pay {
			background-color: #dbf046;
			color: #333;
		}
	}
}
</style>